<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Tree & Road</title>
</head>
<body>
  <div id="CanvasCompatible"></div>
  <script type="text/javascript">
    try {
      document.createElement("canvas").getContext("2d");
      document.getElementById("CanvasCompatible").innerHTML = "Canvas supported";
    }
    catch (e) {
      document.getElementById("CanvasCompatible").innerHTML = "Canvas not supported";
    }
  </script>

  <canvas id="diagonal" style="border: 1px solid;" width="800" height="800">
  </canvas>

  <script type="text/javascript">
    function drawDiagonal1() {
      // Get canvas element and context
      var canvas = document.getElementById("diagonal");
      var context = canvas.getContext("2d");
      
      // Create path
      context.beginPath();
      context.moveTo(70, 140);
      context.lineTo(140, 70);
      
      // Stroke
      context.stroke();
    }
    
    function drawDiagonal() {
      // Get canvas element and context
      var canvas = document.getElementById("diagonal");
      var context = canvas.getContext("2d");
      
      // Save current context
      context.save();
      
      // Make transformation
      context.translate(70, 140);
      
      // Create path
      context.beginPath();
      context.moveTo(0, 0);
      context.lineTo(70, -70);
      context.stroke();
      
      // Restore context
      context.restore();
    }
    
    function createCanopyPath(context) {
      context.beginPath();
      
      context.moveTo(-25, -50);
      context.lineTo(-10, -80);
      context.lineTo(-20, -80);
      context.lineTo(-5, -110);
      context.lineTo(-15, -110);

      // the top of the tree
      context.lineTo(0, -140);

      context.lineTo(15, -110);
      context.lineTo(5, -110);
      context.lineTo(20, -80);
      context.lineTo(10, -80);
      context.lineTo(25, -50);
      
      context.closePath();
    }
    
    function drawTrails() {
      var canvas = document.getElementById("diagonal");
      var context = canvas.getContext("2d");
      
      context.save();     
      context.translate(130, 250);
      drawTree(context);
      context.restore();
      
      // the road
      context.save();
      context.translate(260, 500);
      context.scale(2,2);
      drawTree(context);
      context.restore();
      
      context.save();
      context.translate(-10, 350);
      context.beginPath();
      context.moveTo(0,0);
      context.quadraticCurveTo(170, -50, 260, -190);
      context.quadraticCurveTo(310, -250, 410, -250);
      
      //context.strokeStyle = "#663300";
      context.strokeStyle = context.createPattern(bark, "repeat");
      context.lineWidth = 20;
      context.stroke();
      
      context.restore();
    }
    
    function drawTree(context) {
      context.save();
      context.transform(1,0,-0.5,1,0,0);
      context.scale(1,0.6);
      context.fillStyle = "rgba(0,0,0,0.2)";
      context.fillRect(-5,-50,10,50);
      createCanopyPath(context);
      context.fill();
      context.restore();

      //context.drawImage(bark, -5, -50, 10, 50);
      var trunkGrad = context.createLinearGradient(-5, -50, 5, -50);
      trunkGrad.addColorStop(0, "#663300");
      trunkGrad.addColorStop(0.4, "#996600");
      trunkGrad.addColorStop(1, "#552200");
      context.fillStyle = trunkGrad;
      context.fillRect(-5, -50, 10, 50);

      var shadowGrad = context.createLinearGradient(0, -50, 0, 0);
      shadowGrad.addColorStop(  0, 'rgba(0,0,0,0.5)');
      shadowGrad.addColorStop(0.2, 'rgba(0,0,0,0.0)');
      context.fillStyle = shadowGrad;
      context.fillRect(-5, -50, 10, 50);
      
      createCanopyPath(context);

      context.lineWidth = 4;
      context.lineJoin = "round";
      context.strokeStyle = "#663300";
      context.stroke();
      
      context.fillStyle = "#339900";
      context.fill();
      
    }

    var bark = new Image();
    bark.src = "bark.jpg";
    bark.onload = function() {
      drawTrails();
    }
    //window.addEventListener("load", drawDiagonal, true);
    //window.addEventListener("load", drawTrails, true);
    
  </script>
</body>
</html>
